<template>
  <div class="table-container">
    <h2 class="table-header">简版砂浆器生产活动量模型 (2024年版)</h2>
    <table v-if="dataSources">
      <thead>
        <tr>
          <th colspan="2" rowspan="2">生命周期阶段</th>
          <th rowspan="2">排放方式</th>
          <th rowspan="2" colspan="2">材料名称</th>
          <th colspan="2">活动数据</th>
          <th rowspan="2">/</th>
        </tr>
         <tr>
          <th>数据</th>
          <th>单位</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in dataSources.lifecycleStage" :key="index">
          <td
            v-if="index == 0"
            colspan="2"
            :rowspan="index == 0 ? dataSources.lifecycleStage.length : 0"
          >
            {{ row.lifecycleStage }}
          </td>
          <td
            v-if="index == 0"
            :rowspan="index == 0 ? dataSources.lifecycleStage.length : 0"
          >
            {{ row.emissionType }}
          </td>
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.directEmissions"
          :key="`directEmissions_${index}`"
        >
          <td v-if="index == 0" colspan="2" :rowspan="productionRowspan">
            生产
          </td>
          <td
            v-if="index == 0"
            :rowspan="dataSources.production.directEmissions.length"
          >
            直接排放
          </td>
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.indirectEmissions
            .purchasedElectricity"
          :key="`purchasedElectricity_${index}`"
        >
          <td
            v-if="index == 0"
            :rowspan="
              dataSources.production.indirectEmissions.purchasedElectricity
                .length +
              dataSources.production.indirectEmissions.spontaneousElectricity
                .length +
              dataSources.production.indirectEmissions.normal.length
            "
          >
            间接排放
          </td>
          <td
            v-if="index == 0"
            :rowspan="
              dataSources.production.indirectEmissions.purchasedElectricity
                .length
            "
          >
            外购电力
          </td>
          <td>{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.indirectEmissions
            .spontaneousElectricity"
          :key="`spontaneousElectricity_${index}`"
        >
          <td
            v-if="index == 0"
            :rowspan="
              dataSources.production.indirectEmissions.spontaneousElectricity
                .length
            "
          >
            自发自用电力
          </td>
          <td>{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.indirectEmissions
            .normal"
          :key="`normal_${index}`"
        >
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.processEmissions"
          :key="`processEmissions_${index}`"
        >
          <td
            v-if="index == 0"
            :rowspan="dataSources.production.processEmissions.length"
          >
            过程排放
          </td>
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.production.recycling"
          :key="`recycling_${index}`"
        >
          <td
            v-if="index == 0"
            :rowspan="dataSources.production.recycling.length"
          >
            回收处理
          </td>
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.activityData.quantity }}
          </td>
          <td>{{ row.activityData.unit }}</td>
          <td>/</td>
        </tr>
        <tr>
          <td
            :rowspan="
              dataSources.transportation.rawMaterialTransportation.length +
              dataSources.transportation.inPlantTransportation.length +
              3
            "
          >
            运输/交付
          </td>
          <td
            :rowspan="
              dataSources.transportation.rawMaterialTransportation.length + 1
            "
          >
            运输
          </td>
          <td class="tableHeader">运输阶段</td>
          <td class="tableHeader">原材料</td>
          <td class="tableHeader">运输方式</td>
          <td class="tableHeader">数据（重量)</td>
          <td class="tableHeader">单位</td>
          <td class="tableHeader">运距(km)</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.transportation
            .rawMaterialTransportation"
          :key="`rawMaterialTransportation_${index}`"
        >
          <td
            v-if="index == 0"
            :rowspan="
              dataSources.transportation.rawMaterialTransportation.length
            "
          >
            原材料运输
          </td>
          <td>{{ row.materialName }}</td>
          <td>{{ row.shippingMethod }}</td>
          <td contenteditable="true">{{ row.activityData.quantity }}</td>
          <td @input="updateNotes($event, index)">
            {{ row.activityData.unit }}
          </td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.shippingDistance }}
          </td>
        </tr>
        <tr>
          <td
            :rowspan="
              dataSources.transportation.inPlantTransportation.length + 2
            "
          >
            仓储
          </td>
          <td
            :rowspan="
              dataSources.transportation.inPlantTransportation.length + 1
            "
          >
            场内运输
          </td>
          <td class="tableHeader" colspan="2">材料名称</td>
          <td class="tableHeader">数据</td>
          <td class="tableHeader">单位</td>
          <td>/</td>
        </tr>
        <tr
          v-for="(row, index) in dataSources.transportation
            .inPlantTransportation"
          :key="`inPlantTransportation${index}`"
        >
          <td colspan="2">{{ row.materialName }}</td>
          <td contenteditable="true" @input="updateNotes($event, index)">
            {{ row.quantity }}
          </td>
          <td>{{ row.unit }}</td>
          <td>/</td>
        </tr>
      </tbody>
    </table>
    <div class="calculateBox">
        <el-button
					class="btn"
					type="primary">
					试算
				</el-button>
        <el-button
					class="btn"
					type="primary">
					提交
				</el-button>
      <table>
      <tbody>
        <tr>
            <td colspan="9">合计</td>
            <td>0</td>
          </tr>
          <tr>
            <td colspan="9">产量（m3)</td>
            <td>0</td>
          </tr>
          <tr>
            <td colspan="9">碳足迹（kgCO2e/m3)</td>
            <td>0</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { sources } from './mock';

// 定义响应式数据
const dataSources = ref(sources);

// 计算属性
const productionRowspan = computed(() => {
  return (
    dataSources.value.production.directEmissions.length +
    dataSources.value.production.processEmissions.length +
    dataSources.value.production.recycling.length +
    dataSources.value.production.indirectEmissions.purchasedElectricity.length +
    dataSources.value.production.indirectEmissions.spontaneousElectricity.length +
    dataSources.value.production.indirectEmissions.normal.length
  );
});

// 生命周期钩子
onMounted(() => {
  document.body.style.overflow = 'auto';
});

onBeforeUnmount(() => {
  document.body.style.overflow = 'hidden';
});

const init = () => {
	dataSources.value = sources;
};
init();
// 方法
function updateNotes(event: Event, index: number): void {
  console.log(event, index);
}
</script>
<style scoped lang="less">
body {
  overflow: auto !important;
}

.table-container {
  margin: 20px auto;
  width: 1200px;
  font-family: Arial, sans-serif;
  word-wrap: break-word;
  word-break: break-all;
}

.table-header {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: #333;
  //color:#82e0aa;
  margin: 20px;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

th,
td {
  border: 1px solid #000;
  padding: 8px;
  line-height: 20px;
  vertical-align: middle;
  min-width: 100px;
  word-wrap: break-word;
  word-break: break-all;
  text-align: center;
}

thead th {
  background-color: #f0f0f0;
  //background-color: #5a9cf8;

}

.tableHeader {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

td[contenteditable="true"]:empty:before {
  content: "请输入数值";
  color: #999;
  font-style: italic;
}
td[contenteditable="true"] {
  background-color: #fff8e1; /* Highlight editable cells */
}
td[contenteditable="true"]:focus:empty:before{
  content: "";
}
.calculateBox {
  text-align: center;
  width: 600px;
  margin: 40px auto;
  .btn{
    width:100px;
    margin-bottom: 20px;
    margin-right: 8px;
  }
}

</style>
